<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue-2.4.0.js"></script>
    <style>
      .first {
        color: red;
      }

      .second {
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <div id="add">
        <!-- 普通 -->
        <p class="first second">这是一段文字</p>
        <!-- 使用vue设置多个样式的时候可以使用数组 -->
        <p :class="pClass">这是一段文字</p>
       <!-- 三目表达式 -->
        <p :class="[flag? pClass:pClass1]">这是一段文字</p>
        <!-- 多类名 -->
        <p :class="arr">这是一段文字</p>
        <!-- 内置对象 -->
        <p :class="[pClass,{'pClass1':flag}]">这是一段文字</p>
        <p :class="{'first':false,'second':true}">这是一段文字...</p>
       
    </div>
  </body>
  <script>
    let ve = new Vue({
        el:"#add",
        data:{
                pClass: 'first',
                pClass1: 'second',
                flag: false,
                arr:["first","second"],
        }
        
    }); 

  </script>
</html>
